<template>
    <div class="shelf-header" v-if="title">{{ title }}</div>
    <div class="shelf-wrapper">
      
      <div class="shelf-main-container">
        <!-- 货架主体 -->
        <div class="shelf-container">
          <div v-for="(group, groupIndex) in reversedGroups" :key="groupIndex" class="shelf-group">
            <div v-for="(layer, layerIndex) in reversedLayers(group)" :key="layerIndex" class="shelf-layer">
              <div class="shelf-cells-row">
                <div 
                  v-for="cell in reversedCells(layer)" 
                  :key="cell.id"
                  class="shelf-cell"
                  :class="getCellClass(cell)"
                  :title="getCellTooltip(cell)"
                  @click="handleCellClick(cell)"
                >
                  <div class="cell-id">{{ cell.id }}</div>
                  <div class="cell-status">{{ getStatusText(cell.status) }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
  
        <!-- 右侧状态图例 -->
        <div class="status-legend">
          <div class="legend-title">状态说明</div>
          <div v-for="(status, key) in statusMap" :key="key" class="legend-item">
            <div class="legend-color" :class="status.class"></div>
            <div class="legend-text">{{ status.text }}</div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue';
  
  // 状态映射配置
  const statusMap = {
    0: { text: '空', class: 'cell-empty' },
    1: { text: '未钎焊', class: 'cell-unwelded' },
    2: { text: '已钎焊', class: 'cell-welded' },
    3: { text: '钎焊NG', class: 'cell-welded-ng' },
    4: { text: '检测NG', class: 'cell-check-ng' }
  };
  
  const props = defineProps({
    title: {
      type: String,
      default: '货架状态显示'
    },
    cells: {
      type: Array,
      required: false,
      default: () => Array.from({ length: 243 }, (_, i) => {
        const cellId = i + 1;
        const group = Math.floor((cellId - 1) / 81) + 1;
        const layer = Math.floor(((cellId - 1) % 81) / 9) + 1;
        const position = (cellId - 1) % 9 + 1;
        
        let status = 0;
        if (position === 1 || position === 9) status = 1;
        else if (layer === 1 || layer === 9) status = 2;
        else if (Math.random() > 0.8) status = 3;
        else if (Math.random() > 0.9) status = 4;
        
        return {
          id: cellId,
          status: status,
          itemId: status !== 0 ? `ITEM-${group}-${layer}-${position}` : ''
        };
      }),
      validator: (value) => {
        if (!value) return true;
        return value.length === 243 && 
               value.every(cell => 
                 cell?.id && 
                 cell?.status !== undefined && 
                 cell?.itemId !== undefined
               );
      }
    }
  });
  
  const emit = defineEmits(['cell-click']);
  
  // 常量定义
  const totalGroups = 3;
  const totalLayers = 9;
  const cellsPerLayer = 9;
  
  // 计算属性
  const currentCells = computed(() => props.cells || defaultCells);
  const groupedCells = computed(() => {
    const groups = Array.from({ length: totalGroups }, () => 
      Array.from({ length: totalLayers }, () => [])
    );
    
    for (let i = 0; i < 243; i++) {
      const groupIndex = Math.floor(i / 81);
      const layerIndex = Math.floor((i % 81) / cellsPerLayer);
      groups[groupIndex][layerIndex].push(currentCells.value[i]);
    }
    
    return groups;
  });
  
  const reversedGroups = computed(() => [...groupedCells.value].reverse());
  const reversedLayers = (group) => [...group].reverse();
  const reversedCells = (layer) => [...layer].reverse();
  
  // 工具函数
  const getCellClass = (cell) => statusMap[cell.status]?.class || '';
  const getStatusText = (status) => statusMap[status]?.text || '未知';
  const getCellTooltip = (cell) => {
    return `货格 ${cell.id}\n状态: ${getStatusText(cell.status)}\n${cell.itemId ? '物品: ' + cell.itemId : '无物品'}`;
  };
  const handleCellClick = (cell) => emit('cell-click', cell);
  </script>
  
  <style scoped>
  .shelf-wrapper {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
  
  .shelf-header {
    font-size: 16px;
    font-weight: bold;
    padding: 8px 0;
    margin-bottom: 10px;
    color: #333;
  }
  
  .shelf-main-container {
    display: flex;
    gap: 15px;
  }
  
  .shelf-container {
    flex: 1;
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 10px;
  }
  
  .shelf-group {
    flex: 1;
    min-width: 0;
    background-color: #fff;
    padding: 8px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  
  .shelf-layer {
    margin-bottom: 7px;
  }
  
  .shelf-cells-row {
    display: flex;
    gap: 3px;
  }
  
  .shelf-cell {
    flex: 1;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  
  .cell-id {
    font-weight: bold;
    z-index: 1;
  }
  
  .cell-status {
    z-index: 1;
    font-size: 8px;
  }
  
  /* 状态样式 */
  .cell-empty { background-color: #e8f5e9; color: #2e7d32; }
  .cell-unwelded { background-color: #bbdefb; color: #0d47a1; }
  .cell-welded { background-color: #c8e6c9; color: #1b5e20; }
  .cell-welded-ng { background-color: #ffcdd2; color: #c62828; }
  .cell-check-ng { background-color: #fff9c4; color: #f57f17; }
  
  /* 右侧状态图例 */
  .status-legend {
    width: 150px;
    padding: 12px;
    background: #f8f8f8;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
  }
  
  .legend-title {
    font-weight: bold;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
  }
  
  .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .legend-color {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid #d0d0d0;
  }
  
  .legend-text {
    font-size: 13px;
    color: #444;
  }
  
  /* 虚线背景效果 */
  .shelf-cell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h1v1H0V0zm2 2h1v1H2V2zm2-2h1v1H4V0zm0 4h1v1H4V4z' fill='currentColor' fill-opacity='0.2'/%3E%3C/svg%3E");
    background-size: 6px 6px;
    z-index: 0;
    opacity: 0.5;
  }
  </style>